<template>
    <div class="box">
        <header class="header">
            <van-nav-bar
            right-text="搜索"
            left-arrow
            @click-left="goBack"
            @click-right="onSearch"
            >
             <van-search
                v-model="value"
                slot="title"
                placeholder="请输入搜索关键词"
                @search="onSearch"
            />
            </van-nav-bar>
        </header>
        <div class='content'>
            <van-sidebar v-model="activeKey" @change="onChange">
                <van-sidebar-item 
                v-for="(item,index) of kindlist"
                :key='index'
                 :title="item" />
            </van-sidebar>
            <div class="rightlist">
              <van-row type="flex" justify="space-around">
                <van-col span="9" v-for="(item,index) of rightlist" :key="index">
                    <!-- <img :src="item.brandimg" alt="" > -->
                    <span>{{item.brand}}</span>
                </van-col>
              </van-row>
            </div>
        </div>
    </div>    
</template>
<script>
import Vue from 'vue'
import { Search,NavBar,Sidebar, SidebarItem,Notify,Col,Row } from 'vant'
import { Ykind,Ykindlist } from '@/api'

Vue.use(Search)
Vue.use(NavBar)
Vue.use(Sidebar)
Vue.use(SidebarItem)
Vue.use(Notify)
Vue.use(Col)
Vue.use(Row)
export default {
    data () {
        return {
            value:'',
            activeKey: 0,
            kindlist:[],
            rightlist:[]
        }
    },
    methods: {
        // 搜索函数
      onSearch () {
          console.log('搜索')
      },
      // 返回上一页
      goBack () {
          this.$router.go(-1)
      },
      onChange(index) {
        console.log(index)
        Ykindlist({type:this.kindlist[index]}).then(res=>{
          console.log(res.data.data)
          this.rightlist = res.data.data
        })
      },
    },
    mounted() {
      Ykind().then(res=>{
        console.log(res)
        this.kindlist = res.data.data
        this.onChange(0)
      })
      
    },
}
</script>
<style lang='scss' scoped>
.van-nav-bar__title {
    max-width: 80%;
}
.van-search{
    width: 100%;
    padding: 5px 12px;
}
.van-sidebar{
  height: 100%;
  float: left;
}
.rightlist{
  float: left;
  width: calc(100% - 85px);
    .van-row .van-row--flex .van-row--justify-space-around{
      // height: 100%;
      flex-wrap: wrap;
      img{
        width: 50px;
        height: 50px;
      }
    }
}
.van-col{
  text-align: center;
  line-height: 50px;
}
</style>
